<template>
    <div>
        <LangHeaderS :styleColor="1"></LangHeaderS>
        <div :class="screenWidth > 1000 ? 'page-content' : 'h5s-content'">
            <div class="main">
                <div class="bannerTop">
                    <div :class="screenWidth > 1000 ? 'banner' : 'h5s'">
                        <div class="title">{{$t('h.TraveTnquiry')}}</div>
                        <div class="summary">{{$t('h.tip2')}}</div>
                        <img v-if="screenWidth > 1000" src="@/assets/img/tip.png" alt="" class="tip">
                    </div>
                </div>
                <div>
                    <div :class="screenWidth > 1000 ? 'wrap' : 'h5s2'">
                        <div class="title">{{$t('h.offLine')}}</div>
                        <div class="main">
                            <div class="swiper-wrap">
                                <div  v-show="screenWidth > 1000" class="swiper-container swiper-container1">
                                    <div class="swiper-wrapper">
                                        <div @click="open()"
                                            :class="{ 'swiper-slide': true, 'list-box': screenWidth > 1000 }">
                                            <div class="box">
                                                <div class="img-box"><img class="cloud-img"
                                                        src="@/assets/img/img-1.png"></div>
                                            </div>
                                        </div>
                                        <div @click="open2()"
                                            :class="{ 'swiper-slide': true, 'list-box': screenWidth > 1000 }">
                                            <div class="box">
                                                <div class="img-box"><img class="cloud-img"
                                                        src="@/assets/img/img-2.png"></div>
                                            </div>
                                        </div>
                                        <div @click="open3()"
                                            :class="{ 'swiper-slide': true, 'list-box': screenWidth > 1000 }">
                                            <div class="box">
                                                <div class="img-box"><img class="cloud-img"
                                                        src="@/assets/img/img-3.png"></div>
                                            </div>
                                        </div>
                                        <div @click="open4()"
                                            :class="{ 'swiper-slide': true, 'list-box': screenWidth > 1000 }">
                                            <div class="box">
                                                <div class="img-box"><img class="cloud-img"
                                                        src="@/assets/img/img-4.png"></div>
                                            </div>
                                        </div>
                                        <div @click="open5()"
                                            :class="{ 'swiper-slide': true, 'list-box': screenWidth > 1000 }">
                                            <div class="box">
                                                <div class="img-box"><img class="cloud-img"
                                                        src="@/assets/img/img-5.png"></div>
                                            </div>
                                        </div>

                                    </div>

                                </div>
                                <div  v-show="screenWidth <= 1000" class="swiper-container swiper-container2">
                                    <div class="swiper-wrapper">
                                        <div @click="open()"
                                            :class="{ 'swiper-slide': true, 'list-box': screenWidth > 1000 }">
                                            <div class="box">
                                                <div class="img-box"><img class="cloud-img"
                                                        src="@/assets/img/img-1.png"></div>
                                            </div>
                                        </div>
                                        <div @click="open2()"
                                            :class="{ 'swiper-slide': true, 'list-box': screenWidth > 1000 }">
                                            <div class="box">
                                                <div class="img-box"><img class="cloud-img"
                                                        src="@/assets/img/img-2.png"></div>
                                            </div>
                                        </div>
                                        <div @click="open3()"
                                            :class="{ 'swiper-slide': true, 'list-box': screenWidth > 1000 }">
                                            <div class="box">
                                                <div class="img-box"><img class="cloud-img"
                                                        src="@/assets/img/img-3.png"></div>
                                            </div>
                                        </div>
                                        <div @click="open4()"
                                            :class="{ 'swiper-slide': true, 'list-box': screenWidth > 1000 }">
                                            <div class="box">
                                                <div class="img-box"><img class="cloud-img"
                                                        src="@/assets/img/img-4.png"></div>
                                            </div>
                                        </div>
                                        <div @click="open5()"
                                            :class="{ 'swiper-slide': true, 'list-box': screenWidth > 1000 }">
                                            <div class="box">
                                                <div class="img-box"><img class="cloud-img"
                                                        src="@/assets/img/img-5.png"></div>
                                            </div>
                                        </div>

                                    </div>

                                </div>
                            </div>
                            <div class="prev-next" v-if="screenWidth > 1000">
                                <i @click="prev" class="l-iconfont prev">&#xe603;</i>
                                <i @click="next" class="l-iconfont next">&#xe604;</i>
                            </div>
                        </div>
                        <div class="text">
                            <div class="text-wrap">
                                <p class="address"> {{$t('h.addressN')}}： <span>{{ jqu[cur].address }}</span></p>
                                <p class="time"> {{$t('h.Shours')}}： <span>{{ jqu[cur].time }}</span></p>
                                <p v-if="jqu[cur].phone" class="phone"> {{$t('h.Cphone')}}： <span>{{ jqu[cur].phone }}</span></p>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="dia">
            <el-dialog @close="close" :show-close="false" :visible.sync="dialogVisible"
                :width="screenWidth > 1000 ? '30%' : '80%'">
                <div class="dio">
                    <img src="@/assets/img/img-1.png" alt="">
                    <div class="text-wrap">
                        <p class="address"> {{$t('h.addressN')}}： <span>{{ jqu[0].address }}</span></p>
                        <p class="time"> {{$t('h.Shours')}}： <span>{{ jqu[0].time }}</span></p><!---->
                    </div>
                </div>
                <div slot="footer" class="dialog-footer">
                </div>
            </el-dialog>
            <el-dialog @close="close" :show-close="false" :visible.sync="dialogVisible2"
                :width="screenWidth > 1000 ? '30%' : '80%'">
                <div class="dio">
                    <img src="@/assets/img/img-2.png" alt="">
                    <div class="text-wrap">
                        <p class="address">  {{$t('h.addressN')}}： <span>{{ jqu[1].address }}</span></p>
                        <p class="time">  {{$t('h.Shours')}}： <span>{{ jqu[1].time }}</span></p><!---->
                    </div>
                </div>
                <div slot="footer" class="dialog-footer">
                </div>
            </el-dialog>
            <el-dialog @close="close" :show-close="false" :visible.sync="dialogVisible3"
                :width="screenWidth > 1000 ? '30%' : '80%'">
                <div class="dio">
                    <img src="@/assets/img/img-3.png" alt="">
                    <div class="text-wrap">
                        <p class="address">  {{$t('h.addressN')}}： <span>{{ jqu[2].address }}</span></p>
                        <p class="time">  {{$t('h.Shours')}}： <span>{{ jqu[2].time }}</span></p><!---->
                        <p class="time">  {{$t('h.Cphone')}} <span>{{ jqu[2].phone }}</span></p><!---->
                    </div>
                </div>
                <div slot="footer" class="dialog-footer">
                </div>
            </el-dialog>
            <el-dialog @close="close" :show-close="false" :visible.sync="dialogVisible4"
                :width="screenWidth > 1000 ? '30%' : '80%'">
                <div class="dio">
                    <img src="@/assets/img/img-4.png" alt="">
                    <div class="text-wrap">
                        <p class="address">  {{$t('h.addressN')}}： <span>{{ jqu[3].address }}</span></p>
                        <p class="time">  {{$t('h.Shours')}}： <span>{{ jqu[3].time }}</span></p><!---->
                    </div>
                </div>
                <div slot="footer" class="dialog-footer">
                </div>
            </el-dialog>
            <el-dialog @close="close" :show-close="false" :visible.sync="dialogVisible5"
                :width="screenWidth > 1000 ? '30%' : '80%'">
                <div class="dio">
                    <img src="@/assets/img/img-5.png" alt="">
                    <div class="text-wrap">
                        <p class="address">  {{$t('h.addressN')}}： <span>{{ jqu[4].address }}</span></p>
                        <p class="time">  {{$t('h.Shours')}}： <span>{{ jqu[4].time }}</span></p><!---->
                    </div>
                </div>
                <div slot="footer" class="dialog-footer">
                </div>
            </el-dialog>

        </div>
        <LangFooterS></LangFooterS>
    </div>
</template>
<script>
import Swiper from 'swiper'
import LangHeaderS from '@/components/Lang-Header.vue'
import LangFooterS from '@/components/Lang-Footer.vue'
export default ({
    components: {
        LangHeaderS,
        LangFooterS
    },
    data() {
        return {
            swiper: '',
            swiper2:'',
            jqu: [{  address: this.$t('h.lineAdd1'), time: '9:00-18:00' },
            {address:this.$t('h.lineAdd2'), time: '8:30-17:00' },
            {address: this.$t('h.lineAdd3'), time: '9:00-20:00', phone: '029-87368555、029-87360777' },
            {address: this.$t('h.lineAdd4'), time: '8:30-18:00' },
            {address: this.$t('h.lineAdd5'), time: '9:00-17:00' }
            ],
            cur: 2,
            dialogVisible: false,
            dialogVisible2: false,
            dialogVisible3: false,
            dialogVisible4: false,
            dialogVisible5: false,
            opens: true,
            op: 0
        }
    },
    computed: {
        screenWidth() {
            return this.$store.getters.screenWidth
        }
    },
    watch: {
        screenWidth(n, o) {
            let cur = this.cur

            if (n <= 1000 && o > 1000) {

                this.$nextTick(() => {
                    this.getSwiper2(cur)
                })
            } else if (n > 1000 && o <= 1000) {
                this.$nextTick(() => {
                    this.getSwiper(cur)
                })
            } else {
                return
            }
        }
    },
    mounted() {
        // window.scrollTo({ top: 0, behavior: 'smooth' });
        this.getSwiper(2)
        this.getSwiper2(2)
    },
    methods: {

        getSwiper(cur) {
            let that = this
            this.swiper = new Swiper('.swiper-container1', {
                slidesPerView: 'auto',
                centeredSlides: true,
                allowTouchMove: false,
                spaceBetween: "9.4%",
                initialSlide: cur,
                navigation: {
                    nextEl: '.next',
                    prevEl: '.prev',
                },
                on: {
                    slideChangeTransitionStart: function () {
                        that.cur = this.activeIndex
                    }
                },
            });

        },
        getSwiper2(cur) {
            let that = this
            this.swiper2 = new Swiper('.swiper-container2', {
                slidesPerView: 'auto',
                centeredSlides: true,
                spaceBetween: '9.4%',
                initialSlide: cur,
                on: {
                    slideChangeTransitionStart: function () {
                        that.$nextTick(() => {
                            that.cur = this.activeIndex
                        })
                    }
                },
            });


        },
        open() {
            if (this.opens) {
                this.dialogVisible = true
                this.$nextTick(() => {
                    const swiper = this.swiper;
                    const swiper2 = this.swiper2;
                    // 可以在这里调用swiper的update方法来确保布局正确
                    swiper.update();
                    swiper2.update();
                });
            }
        },
        open2() {
            if (this.opens) {
                this.dialogVisible2 = true
                this.$nextTick(() => {
                    const swiper = this.swiper;
                    const swiper2 = this.swiper2;
                    // 可以在这里调用swiper的update方法来确保布局正确
                    swiper.update();
                    swiper2.update();
                });
            }
        },
        open3() {
            if (this.opens) {
                this.dialogVisible3 = true
                this.$nextTick(() => {
                    const swiper = this.swiper;
                    const swiper2 = this.swiper2;
                    // 可以在这里调用swiper的update方法来确保布局正确
                    swiper.update();
                    swiper2.update();
                });
            }
        },
        open4() {
            if (this.opens) {
                this.dialogVisible4 = true
                const swiper = this.swiper;
                    const swiper2 = this.swiper2;
                    // 可以在这里调用swiper的update方法来确保布局正确
                    swiper.update();
                    swiper2.update();
            }
        },
        open5() {
            if (this.opens) {
                this.dialogVisible5 = true
                const swiper = this.swiper;
                    const swiper2 = this.swiper2;
                    // 可以在这里调用swiper的update方法来确保布局正确
                    swiper.update();
                    swiper2.update();
            }
        },
        close() {
            this.$nextTick(() => {
                const swiper = this.swiper;
                    const swiper2 = this.swiper2;
                    // 可以在这里调用swiper的update方法来确保布局正确
                    swiper.update();
                    swiper2.update();
            });
        },
        prev() {
            if (this.cur > 0) {
                this.cur -= 1
            }

        },
        next() {
            if (this.cur + 1 < this.jqu.length) {
                this.cur += 1
            }
            console.log(this.cur);


        },
        
        stopTouchMove() {
            console.log(111);

            return false
        }
    }
})
</script>
<style scoped lang="scss">
.bread-crumb-box {
    ::v-deep span {
        a:hover {
            color: #e31c1c;
        }
    }
}

.dia {
    ::v-deep .el-dialog__body {
        text-align: initial;
        padding: 1.30208vw 1.30208vw 1.5625vw;
    }

    ::v-deep .el-dialog__header {
        padding: 1.04167vw 1.04167vw 0.52083vw;
    }

    ::v-deep .el-dialog__footer {
        padding: 0.52083vw 1.04167vw 1.04167vw;
        text-align: right;
        box-sizing: border-box;
    }

    ::v-deep .el-dialog__body {
        color: #606266;
        font-size: 0.72917vw;
        word-break: break-all;
    }
}

.page-content {
    min-height: -webkit-calc(100vh - 25.52083vw);
    min-height: calc(100vh - 25.52083vw);
    min-width: 70.83333vw;
}

.bannerTop .banner {
    width: 100vw;
    height: 39.58333vw;
    background-image: url(@/assets/img/banner02.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    overflow: hidden;
    text-align: center;
    color: #fff;
    position: relative;
}

.bannerTop .banner .title {
    font-weight: bold;
    font-size: 2.08333vw;
    margin: 16.66667vw 0 1.04167vw;
}

.bannerTop .banner .summary {
    font-size: 1.5625vw;
}

.bannerTop .banner .tip {
    width: 1.04167vw;
    position: absolute;
    bottom: 2.08333vw;
    left: -webkit-calc(50% - 0.52083vw);
    left: calc(50% - 0.52083vw);
    -webkit-animation: bounce-down-data-bd225cd6 1.6s linear infinite;
    animation: bounce-down-data-bd225cd6 1.6s linear infinite;
    max-width: 100%;
    border: 0;
    vertical-align: middle;
}

@keyframes bounce-down-data-bd225cd6 {
    25% {
        -webkit-transform: translateY(-4px);
    }

    50%,
    100% {
        -webkit-transform: translateY(0);
    }

    75% {
        -webkit-transform: translateY(4px);
    }
}

.wrap {
    width: 100%;
    position: relative;
    background: #fff;
    overflow: hidden;
}

.wrap .title {
    font-weight: bold;
    font-size: 1.5625vw;
    margin: 5.72917vw auto 3.64583vw;
    text-align: center;
}

.wrap .main {
    width: 87.5vw;
    margin: auto;
    position: relative;
}

.wrap .swiper-wrap {
    width: 75.15625vw;
    margin: auto;
    position: relative;
    z-index: 9;
}

.wrap .swiper-wrap .swiper-container {
    height: 20.83333vw;
}

.wrap .swiper-wrap .swiper-slide {
    width: auto !important;
    height: auto;
}

.wrap .swiper-wrap .swiper-wrapper {
    -webkit-box-align: center;
    align-items: center;
}

.swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

.swiper-container {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
}

.wrap .swiper-wrap .swiper-slide .box {
    width: 100%;
    cursor: pointer;
}

.wrap .swiper-wrap .swiper-slide .box .img-box {
    width: 9.375vw;
    height: 9.375vw;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.wrap .swiper-wrap .swiper-slide .box .img-box img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.wrap .swiper-wrap .swiper-slide-active {
    -webkit-transform: scale(2);
    transform: scale(2);
    position: relative;
    background: #ffffff;
    box-shadow: 0 0 1.04167vw -0.78125vw #000000;
    border-radius: 50%;
}

.wrap .swiper-wrap .swiper-slide-active .box .img-box {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    border: 1px dotted rgba(51, 51, 51, 0.1);
    border-radius: 50%;
}

.wrap .swiper-wrap .swiper-slide-active .box img {
    display: block;
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
}

.wrap .main .prev-next i {
    position: absolute;
    top: 10.41667vw;
    font-size: 1.61458vw;
    cursor: pointer;
    color: #d8d8d8;
}

.wrap .main .prev {
    left: 0;
}

.wrap .main .next {
    right: 0;
}

.wrap .main .prev-next i:hover {
    color: #19aa8e;
}

.wrap .text {
    text-align: center;
    color: #333;
    font-size: 0.83333vw;
    margin: 2.60417vw 0 5.72917vw;
}

.wrap .text .text-wrap {
    display: inline-block;
    text-align: left;
}

.wrap .text.text-wrap p {
    margin: 0.26042vw 0;
}

.dio img {
    max-width: 100%;
    border: 0;
    vertical-align: middle;
}

.dio .text-wrap {
    display: inline-block;
    text-align: left;
}

.dio .text-wrap p {
    margin: 0.26042vw 0;
}

@media (max-width:1000px) {
    .h5s-content {
        min-height: -webkit-calc(100vh - 6rem);
        min-height: calc(100vh - 6rem);
    }

    .h5s {
        width: 7.5rem;
        height: 4.6rem;
        background-image: url(@/assets/img/banner02.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        text-align: center;
        overflow: hidden;
        font-size: 0;
        color: #fff;
    }

    .h5s .title {
        font-size: 0.4rem;
        font-weight: 700;
        margin: 1.9rem 0 0.3rem;
    }

    .h5s .summary {
        font-size: 0.3rem;
    }

    .h5s2 {
        font-size: 0;
        background: #fff;
        overflow: hidden;
        text-align: center;
    }

    .h5s2 .title {
        font-size: 0.4rem;
        color: #333;
        font-weight: 700;
        margin: 0.7rem 0 0.5rem;
    }

    .h5s2 .swiper-wrap {
        width: 100%;
        margin: auto;
        padding: 0 0.75rem;
        position: relative;
        z-index: 9;
    }

    .h5s2 .swiper-wrap .swiper-container {
        height: 2.6rem;
    }

    .h5s2 .swiper-wrap .swiper-wrapper {
        -webkit-box-align: center;
        align-items: center;
    }

    .h5s2 .swiper-wrap .swiper-slide-active {
        -webkit-transform: scale(2);
        transform: scale(2);
        position: relative;
        background: #ffffff;
        box-shadow: 0 0 1.04167vw -0.78125vw #000000;
        border-radius: 50%;
    }

    .h5s2 .swiper-wrap .swiper-slide .box {
        width: 100%;
        cursor: pointer;
    }

    .h5s2 .swiper-wrap .swiper-slide .box .img-box {
        width: 1.2rem;
        height: 1.2rem;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    }

    .h5s2 .swiper-wrap .swiper-slide-active .box .img-box {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
        border: 1px dotted rgba(51, 51, 51, 0.1);
        border-radius: 50%;
    }

    .h5s2 .swiper-wrap .swiper-slide {
        width: auto !important;
        height: auto;
    }

    .h5s2 .swiper-wrap .swiper-slide .box .img-box img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }

    .h5s2 .swiper-wrap .swiper-slide-active .box img {
        display: block;
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }

    .h5s2 .text {
        text-align: center;
        color: #333;
        font-weight: 700;
        font-size: 0.26rem;
        margin: 0.4rem 0 1rem;
    }

    .h5s2 .text {
        text-align: center;
        color: #333;
        font-weight: 500;
        font-size: 0.26rem;
        margin: 0.4rem 0 1rem;
        padding: 0 0.3rem;
    }

    .h5s2 .text-wrap .address {
        margin-top: 0.3rem;
    }

    .h5s2 .text-wrap p {
        font-size: 0.24rem;
    }

    .dio .text-wrap p {
        font-size: 0.24rem;
    }

    .dio .text-wrap .address {
        margin-top: 0.3rem;
    }
}
</style>